<template>
  <div class="login-container">
    <van-nav-bar title="登录" fixed/>
    <van-cell-group>
      <!--    <van-field v-model="tel" type="tel" label="手机号" />-->
      <!--    error-message="手机号格式错误"  -->
      <van-field
          v-model.trim="text"
          required
          label="账号"
          placeholder="请输入账号"
      />
      <van-field
          v-model="password"
          required
          type="password"
          placeholder="请输入密码"
          label="密码"/>
    </van-cell-group>

    <!-- 登录-->
    <van-button type="primary" @click="enter" block>登录</van-button>
  </div>
</template>

<script>
import router from "@/router";
import {Notify} from 'vant';
6
export default {
  name: "Login",
  data() {
    return {
      text: '',
      password: '',
    };
  },
  methods: {
    enter() {
      // 正则
      let index = /^[a-zA-Z0-9_-]{4,16}$/
      let passW = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      console.log(index.test(this.text))
      console.log(passW.test(this.password))
      if (index.test(this.text)) {
        if (this.text === '' && this.password === '') {
          Notify({type: 'warning', message: '请输入登录信息!'});
        } else if (this.text === 'admin' && this.password === '123456') {
          // 存储 token
          localStorage.setItem('token', 'Bearer xxx')
          // 验证成功,直接跳转至home
          this.$router.push('/home/page');
          Notify({type: 'success', message: '登录成功!'});
        } else {
          localStorage.removeItem('token')
          Notify({type: 'danger', message: '账号或密码错误!'});
        }
      }else {
        Notify({type: 'danger', message: '格式不正确'});
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  padding: 46px 0 50px 0;

  .van-nav-bar {
    background-color: #007bff;
  }

  /deep/ .van-nav-bar__title {
    color: white;
  }
}
</style>